<template>
  <van-nav-bar
    style="position: sticky; background-color: #dedede"
    :title="title"
    :left-arrow="leftArrow"
    :border="border"
    :fixed="false"
    :placeholder="false"
    :safe-area-inset-top="false"
    @click-left="goback"
    @click-right="onClickRight"
  >
    <template #right>
      <slot name="right"></slot>
    </template>
  </van-nav-bar>
</template>
<script>
export default {
  name: "TitleBar",
  props: {
    title: {
      type: String,
      default: "",
    },
    leftArrow: {
      type: Boolean,
      default: true,
    },
    border: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  onShow() {},
  methods: {
    goback() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$emit("clickRight");
    },
  },
};
</script>
<style lang="less">
.van-nav-bar {
  width: 100%;
  position: sticky;
  top: 0;
}
/* iphone x / xs / 11 pro*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .ios {
    .van-nav-bar {
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
      padding-top: 40px;
    }
  }
}
/* iphone xr / 11 */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  .ios {
    .van-nav-bar {
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
      padding-top: 40px;
    }
  }
}
/* iphone xs max / 11 pro max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  .ios {
    .van-nav-bar {
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
      padding-top: 40px;
    }
  }
}
/* iphone 12 pro */
@media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) {
  .ios {
    .van-nav-bar {
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
      padding-top: 40px;
      // height: calc(50px + constant(safe-area-inset-top));
      // height: calc(50px + env(safe-area-inset-top));
    }
  }
}
</style>